<template>
  <div class="my-5" v-if="form.warning == 1">
    <el-alert type="error" center :closable="false">
      <el-icon size="24"><WarningFilled /></el-icon><span style="font-size:20px;">{{ form.warning_msg }}！</span>
      <el-button
        type="success" :icon="Check"
        @click="clearWarning(form.order_no)"
        >{{$t('金额确认无误！消除警告信息')}}</el-button>
    </el-alert>
  </div>
  <div class="flex justify-between text-[#e54c5f]">
    <div class="flex items-center cursor-pointer" @click="handleGo">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <span class="pl-5">{{ $t("订单详情") }}</span>
    </div>
    <div>
    <template v-if="form.warning == 0 || form.warning == 2">
      <el-button
        type="success" :icon="Check"
        @click="rechargeAudit(1)"
        v-if="form.status == 0 && form.mer_review_status == 0"
        >{{$t('审核通过')}}</el-button>
      <el-button
        type="primary" :icon="Warning"
        @click="rechargeAudit(2)"
        v-if="form.status == 0 && form.mer_review_status == 0"
        >{{$t('审核拒绝')}}</el-button>
    </template>
      <el-button type="danger" :icon="Close" v-btn="['all', 'web_recharge_cancel']"
        v-if="form.status == 0 && form.mer_review_status == 0" @click="handleCancel(form)">
        {{ $t("取消充值") }}
      </el-button>
    </div>
  </div>

  <el-card class="my-5">
    <template #header>
      <div class="card-header">
        <span>{{ $t("基本信息") }}</span>
      </div>
    </template>
    <el-skeleton :rows="5" animated :loading="loading">
      <div class="px-12">
        <div class="flex">
          <div class="flex-1">
            <ul class="text-center text-base">
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("订单号")}}</span>
                <span class="w-1/2 text-left">{{ form.order_no }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("订单状态") }}</span>
                <span class="w-1/2 text-left">{{ form.status_name }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("充值金额") }}</span>
                <span class="w-1/2 text-left">{{ numberToCurrencyNo(form.amount) }} {{ form.currency }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{  $t("创建时间") }}</span>
                <span class="w-1/2 text-left">{{ formatDates(form.create_time) }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("完成时间") }}</span>
                <span class="w-1/2 text-left">{{ formatDates(form.finish_time) }}</span>
              </li>
            </ul>
          </div>
          <div class="flex-1"></div>
        </div>
      </div>
    </el-skeleton>
  </el-card>
  <el-card class="mb-4">
    <template #header>
      <div class="card-header">
        <span>{{ $t("支付信息") }}</span>
      </div>
    </template>
    <el-skeleton :rows="5" animated :loading="loading">
      <div class="px-12">
        <!-- 收款信息 -->
        <div class="flex">
          <!-- 收款账户信息 -->
          <div class="flex-1">
            <ul class="text-center text-base">
              <li class="flex justify-around mb-4">
                <span class="w-36 text-right"><strong>{{ $t("收款账户信息")}}</strong></span>
                <span class="w-1/2 text-left"></span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("收款账户名称") }}</span>
                <span class="w-1/2 text-left">{{ form.receive_name }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("收款银行名称") }}</span>
                <span class="w-1/2 text-left">{{ form.receive_bank }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("收款银行地址") }}</span>
                <span class="w-1/2 text-left">{{ form.receive_bank_address }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("收款银行账号") }}</span>
                <span class="w-1/2 text-left">{{ form.receive_card_number }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("收款人名称") }}</span>
                <span class="w-1/2 text-left">{{ form.receive_card_name }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("SWIFT码") }}</span>
                <span class="w-1/2 text-left">{{ form.receive_swift_code }}</span>
              </li>
              <li class="flex justify-around mb-2" v-if="form.receive_extended">
                <span class="w-36 text-right">{{ $t("银行补充信息") }}</span>
                <span class="w-1/2 text-left">{{ form.receive_extended }}</span>
              </li>
            </ul>
          </div>
          <!-- 付款账户信息 -->
          <div class="flex-1">
            <ul class="text-center text-base">
              <li class="flex justify-around mb-4">
                <span class="w-36 text-right"><strong>{{ $t("付款账户信息") }}</strong></span>
                <span class="w-1/2 text-left"></span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("付款银行名称") }}</span>
                <span class="w-1/2 text-left">{{ form.send_bank }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("付款银行地址") }}</span>
                <span class="w-1/2 text-left">{{ form.send_bank_address }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("付款银行账号") }}</span>
                <span class="w-1/2 text-left">{{ form.send_card_number }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("付款人名称") }}</span>
                <span class="w-1/2 text-left">{{ form.send_card_name }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("SWIFT码") }}</span>
                <span class="w-1/2 text-left">{{ form.send_swift_code }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("付款时间") }}</span>
                <span class="w-1/2 text-left">{{ formatDates(form.send_pay_time) }}</span>
              </li>
              <li class="flex justify-around mb-2" v-if="form.send_extended">
                <span class="w-36 text-right">{{ $t("银行补充信息") }}</span>
                <span class="w-1/2 text-left">{{ form.send_extended }}</span>
              </li>
              <li class="flex justify-around mb-2" v-if="form.description">
                <span class="w-36 text-right">{{ $t("付款备注") }}</span>
                <span class="w-1/2 text-left">{{ form.description }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("支付方式") }}</span>
                <span class="w-1/2 text-left">{{ form.payment_way }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("支付凭证流水号")}}</span>
                <span class="w-1/2 text-left">{{ form.payment_order_no }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("支付凭证") }}</span>
                <span class="w-1/2 text-left">
                  <el-image class="mx-5 mb-4 h-14" v-for="(item, index) in form.attachments" :key="index" :src="item"
                    :zoom-rate="1.2" :preview-src-list="form.attachments" :initial-index="index" fit="cover" />
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-skeleton>
  </el-card>
  <el-card class="mb-4">
    <template #header>
      <div class="card-header">
        <span>{{ $t("审核信息") }}</span>
      </div>
    </template>
    <el-skeleton :rows="5" animated :loading="loading">
      <div class="px-12">
        <div class="flex">
          <div class="flex-1">
            <ul class="text-center text-base">
              <li class="flex justify-around mb-2">
                <span class="w-36 text-right">{{ $t("平台审核状态") }}</span>
                <span class="w-1/2 text-left"> {{ form.sys_review_status_name }}</span>
              </li>
              <li class="flex justify-around mb-2" v-if="form.sys_review_status != 0">
                <span class="w-36 text-right">{{ $t("审核结果") }}</span>
                <span class="w-1/2 text-left"> {{ form.sys_review_reason }}</span>
              </li>
              <li class="flex justify-around mb-2" v-if="form.sys_review_status != 0">
                <span class="w-36 text-right">{{ $t("审核时间") }}</span>
                <span class="w-1/2 text-left">{{ formatDates(form.sys_audit_time)}}</span>
              </li>
            </ul>
          </div>
          <div class="flex-1"></div>
        </div>
      </div>
    </el-skeleton>
  </el-card>
  <el-dialog v-model="dialogVisible"
    :title="form.audit_status == 1 ? t('通过审核') : ('拒绝审核')"
    width="30%" :destroy-on-close="true"
    :before-close="handleClose">
    <el-input v-model="form.reason" :rows="2" type="textarea" :placeholder="$t('填写审批意见（选填）')" />
    <!--要判断是否开启了谷歌验证-->
    <el-input
      v-model="form.google_code"
      :placeholder="$t('请填写谷歌验证码')"
      v-if="merchantStore.merchantInfo.recharge > 0"
      />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="submit(form.audit_status)">{{ $t("确认") }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  rechargeOrderInfoApi,
  rechargeCancelApi,
  rechargeAuditApi,
  clearOrderWarningApi
} from "@/api/account/index";
import { formatDates, numberToCurrencyNo } from "@/utils/utils";
import { ElMessageBox, ElMessage } from "element-plus";
import { Close, Check, Warning } from '@element-plus/icons-vue'
import { useI18n } from "vue-i18n";
import { useMerchantStore } from "@/store/modules/merchant";
const merchantStore = useMerchantStore();
const { t } = useI18n();
const dialogVisible = ref(false);
// 关闭窗口
const closeDialog = () => {
  dialogVisible.value = false;
};
const loading = ref(false);
const router = useRouter();
const form = reactive({});
const { ...route } = useRoute();

const rechargeAudit = (status) => {
  form.audit_status = status; // 更新 form.status
  dialogVisible.value = true;
};
onMounted(() => {
  if (route.query.order_no) {
    getData(route.query.order_no);
  }
});
// 获取数据
const getData = async (order_no) => {
  loading.value = true;
  try {
    const res = await rechargeOrderInfoApi({ order_no: order_no });
    Object.assign(form, res);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

// 跳转
const handleGo = () => {
  router.replace(`/account/recharge`);
};
//关闭
const handleClose = () => {
  dialogVisible.value = false;
  // Object.assign(form, );
};
const submit = async (status) => {
  const obj = {
    status: status, // 使用传递的 status 参数
    order_no: route.query.order_no,
    reason: form.reason,
  };
  if (merchantStore.merchantInfo.pay > 0) {
    obj.google_code = form.google_code;
  }
  try {
    // 向后端发送请求，传递不同的 status 参数
    const res = await rechargeAuditApi({ ...obj });
    ElMessage({
      showClose: true,
      message: status === 1 ? t("审核通过") : t("拒绝审核"),
      type: "success",
    });

    handleClose();
    getData(route.query.order_no);
  } catch (error) {
    handleClose();
  }
};
// 取消付款
const handleCancel = (item) => {
  ElMessageBox.confirm(t("您是否确认取消付款操作?"), t("温馨提示"), {
    type: "warning",
  })
    .then(async () => {
      const res = await rechargeCancelApi({
        order_no: item.order_no,
      });

      ElMessage({
        message: t("取消付款成功"),
        type: "success",
      });
      getData(item.order_no);
    })
    .catch(() => { });
};
// 消除告警
const clearWarning = (order_no) => {
  ElMessageBox.confirm(t("您是否确认金额正确，同时取消告警信息?"), t("温馨提示"), {
    type: "warning",
  })
    .then(async () => {
      const res = await clearOrderWarningApi({
        order_no: order_no,
      });

      ElMessage({
        message: t("操作成功"),
        type: "success",
      });
      getData(order_no);
    })
    .catch(() => { });
};
</script>
